<template>
    <h4>Vue响应性语法糖</h4>
    <p>小提示 本章内容所讲的东西都是实验性的产物 暂时不要再生产环境使用，自己开发玩可以使用，不过大体框架应该不会变了。<br>
        要求 vue版本 3.2.25 及以上</p>

        <h5 v-on:click="addCount">$ref---{{count}}---点击递增</h5>
        <h5 @click="changeName2">$()---{{name}}---解构</h5>

</template>

<script setup lang='ts'>
import { reactive, toRefs, watch } from 'vue';
import { $$, $ref, $ } from 'vue/macros'
// 1、在之前ref 修改值 和 获取值 都要.value 一下 感觉很繁琐，不想用.value 我们可以使用vue3的新特性$ref 。
let count = $ref(0);
let addCount = function() {
    count++;
}

// 当然跟ref 有关的函数都做处理 都不需要.value了

// ref -> $ref
// computed -> $computed
// shallowRef -> $shallowRef
// customRef -> $customRef
// toRef -> $toRef




// 2.$ref 的弊端:应为他编译之后就是 count.value 并不是一个ref对象所以watch 无法监听而且会抛出一个警告
// 解决这个问题需要$$ 符号 就是再让他编译的时候变成一个ref 对象不加.value 

watch($$(count), (newVal) => {
    console.log('watch-count=>', newVal)
})






// 3.解构
// 在之前我们解构一个对象使用toRefs 解构完成之后 获取值和修改值 还是需要.value
// vue3 也提供了 语法糖  $() 解构完之后可以直接赋值
let testObj = reactive({
    name: 'zhangsan'
});

// let { name } = toRefs(testObj);
// let changeName = () => {
//     name.value = 'zhangsan--1'
// }

let { name } = $(testObj);
let changeName2 = () => {
    name = 'zhangsan--2'
}

</script>

<style>

</style>